<template>
  <div>
    <el-form
      ref="form"
      :model="params"
      status-icon
      v-loading.fullscreen.lock="loading"
      :rules="rules"
      element-loading-background="rgba(0, 0, 0, 0.7)"
      label-width="70px"
      class="w-11/12 pt-2 mx-auto space-y-8 sm:w-4/5"
    >
      <el-form-item prop="account">
        <el-input v-model="params.account" autocomplete="off" placeholder="邮箱/手机/用户" size="large" :prefix-icon="Message" class="h-12 text-base" />
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="params.password" type="password" autocomplete="off" size="large" :placeholder="$t('login.password')" show-password :prefix-icon="Lock" class="h-12 text-base" />
      </el-form-item>
    </el-form>
    <div class="flex justify-between w-11/12 mx-auto mt-3 sm:w-4/5">
      <el-checkbox v-model="params.remember" class="top-2">
        {{ $t('login.remember') }}
      </el-checkbox>
      <div class="pt-3 text-sm text-indigo-600 cursor-pointer">
        {{ $t('login.lost_password') }}
      </div>
    </div>
    <div class="w-11/12 mx-auto mt-5 sm:w-4/5">
      <el-button type="primary" @click="submit(form)" size="large" class="w-full text-xl">
        {{ $t('login.sign_in') }}
      </el-button>
    </div>
  </div>
</template>
<script setup lang="ts">
// @ts-nocheck
import { Lock, Message } from '@element-plus/icons-vue'
import { useLogin } from './login'
import { t } from '@/support/helper'

const { params, loading, submit, form, rules } = useLogin(
  {
    account: 'catch@admin.com',
    password: 'catchadmin',
    remember: false
  },
  {
    account: [{ required: true, message: '请输入邮箱/手机号/用户名', trigger: 'blur' }],
    password: [{ required: true, message: t('login.verify.password.required'), trigger: 'blur' }]
  }
)
</script>
